<template>
  <div class="page-miH page-bgBack pb32">
    <PageHeader @back="$router.go(-1)" subTitle="返回">导入算税数据</PageHeader>
    <div style="padding: 24px">
      <a-alert style="background-color: #fff1f0" v-if="failList.length !== 0" type="error" :message="message" banner>
        <span slot="description">
          <span class="exportErrData" @click="exportErrData">导出错误数据</span>
        </span>
      </a-alert>
      <a-alert v-else :message="message" type="info" show-icon />
      <a-table style="padding: 24px 0" :columns="columns" bordered :data-source="data">
        <div slot="reason" slot-scope="text, record" style="position: relative">
          <a-popover v-if="record.reason" title="数据错误" placement="right">
            <template slot="content">
              <p>{{ record.reason }}</p>
            </template>
            <div class="triangle"></div>
          </a-popover>
          <a-tooltip placement="top" v-if="record.reason">
            <template slot="title">
              <span>{{ text }}</span>
            </template>
            <div class="overflowsIdentity" style="height: 22px">{{ record.reason }}</div>
          </a-tooltip>
        </div>
      </a-table>
    </div>
    <div class="boxBottom">
      <a-button style="margin-right: 12px" @click="$router.go(-1)">取消</a-button>
      <a-button type="primary" :loading="loading" @click="nextStep">下一步</a-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "错误数据",
          dataIndex: "reason",
          key: "reason",
          scopedSlots: { customRender: "reason" }
        },
        {
          title: "姓名",
          dataIndex: "empName",
          key: "empName"
        },
        {
          title: "身份证号",
          dataIndex: "licenseNumber",
          key: "licenseNumber"
        },

        {
          title: "本期收入",
          dataIndex: "income",
          key: "income"
        },
        {
          title: "基本养老保险费",
          dataIndex: "endowmentInsurance",
          key: "endowmentInsurance"
        },
        {
          title: "基本医疗保险费",
          dataIndex: "medicalInsurance",
          key: "medicalInsurance"
        },
        {
          title: "失业保险费",
          dataIndex: "unemploymentInsurance",
          key: "unemploymentInsurance"
        },
        {
          title: "房公积金",
          dataIndex: "houseProvidentFund",
          key: "houseProvidentFund"
        }
      ],
      successList: [],
      failList: [],
      fileName: "",
      message: "",
      data: [],
      failExportUrl: ""
    };
  },
  created() {
    this.successList = this.$route.query.successList || [];
    this.failList = this.$route.query.failList || [];
    this.fileName = this.$route.query.fileName;
    console.log(this.fileName, this.successList, this.failList);
    if (this.failList.length !== 0) {
      this.message = `导入${this.fileName}，有${this.failList.length}条数据异常，请尽快处理`;
    } else {
      this.message = `导入${this.fileName}，共${this.successList.length}人，无异常数据`;
    }
    this.data = [...this.failList, ...this.successList];
    this.failExportUrl = this.$route.query.failExportUrl;
    console.log(this.successList, this.failList, this.fileName);
  },
  methods: {
    nextStep() {
      this.$router.push({ name: "calculateInfo", query: { id: this.$route.query.batchId } });
    },
    exportErrData() {
      const token = this.$store.state.auth.token;
      window.open(`${this.failExportUrl}?token=${token}`);
    }
  }
};
</script>
<style lang="scss" scoped>
.exportErrData {
  color: red;
  position: absolute;
  top: 16px;
  right: 24px;
  cursor: pointer;
}
.boxBottom {
  width: 100%;
  height: 56px;
  line-height: 56px;
  background: #ffffff;
  text-align: center;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.15);
  position: fixed;
  bottom: 0;
  padding-right: 204px;
}
.triangle {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 0;
  height: 0;
  // border-top: 20px solid transparent;
  border-left: 10px solid red;
  // border-right: 20px solid transparent;
  border-bottom: 10px solid transparent;
}
</style>
